<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 input {background:white;width: 60px;}
#div1 .active {background:red;}
#div1{margin: 100px auto;width: 200px;}
#div1 div {width:200px; height:200px; background:##EEEEEE; display:none;font-size: 28px;text-align: center;line-height: 200px;background: red;color: white;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var aBtn=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');
    var i=0;
    
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            for(i=0;i<aBtn.length;i++)
            {
                aBtn[i].className='';
                aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
        };
    }
};
</script>
</head>
<body>
	<div id="div1">
    <input class="active" type="button" value="按钮1" />
    <input type="button" value="按钮2" />
    <input type="button" value="按钮3" />
    <div style="display:block;">页面一</div>
    <div>页面二</div>
    <div>页面三</div>
</div>
</body>
</html>